<template>
  <view class="main">
    <c-navBar title="个人信息" isSeat></c-navBar>
    <view @click="uploadAvatar" class="item">
      <text class="text">头像</text>
      <view class="item-right">
        <image
          class="head"
          :src="
            form.avatar ? form.avatar : require('@/static/tabbar/hander.png')
          "
          mode="aspectFill"
        ></image>
        <u-icon name="arrow-right" color="#666666" size="20rpx"></u-icon>
      </view>
    </view>

    <view class="items item">
      <text class="text">姓名</text>
      <view class="item-right">
        <input
          class="ipt"
          v-model="form.name"
          placeholder="最多输入8个字符"
          @input="handleInput"
        />
      </view>
    </view>
    <view class="items item" @click="select_sex">
      <text class="text">性别</text>
      <view class="item-right">
        <view class="ipt">
          {{ form.sex == 0 ? "女" : "" }}
          {{ form.sex == 1 ? "男" : "" }}
        </view>
        <u-icon name="arrow-right" color="#666666" size="20rpx"></u-icon>
      </view>
    </view>
    <view class="items item">
      <text class="text">手机号码</text>
      <view class="item-right ipt">
        {{ form.phone
        }}<!-- <input class="ipt" v-model="form.phoneNumber" placeholder="请输入手机号" /> -->
      </view>
    </view>
    <!-- <view class="items mt40">
			<view class="text">个性签名</view>
			<view class="mt20">
				<u--textarea v-model="form.description" height="200rpx" placeholder="请输入内容"></u--textarea>
			</view>
		</view> -->
    <!-- 按钮 -->
    <view @click="submit" class="footer">
      <view class="footer-btn">保存</view>
    </view>

    <!-- 选择性别 -->
    <u-picker
      :show="show"
      :columns="sexColumns"
      @confirm="selected_sex"
      @cancel="show = false"
      keyName="name"
      confirmColor="#2AD03D"
    ></u-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false, //性别选择
      sexColumns: [
        [
          {
            name: "女",
            type: 0,
          },
          {
            name: "男",
            type: 1,
          },
        ],
      ],
      regionShow: false, //地区选择
      form: {
        avatar: "", //头像
        name: "", //昵称
        sex: 0, //性别1=男，0=女
        phone: "", //手机号
        description: "",
      },
    };
  },
  methods: {
    handleInput(e) {
      // console.log(e.target.value,"enevt");
      let input = e.target.value;
      // 限制输入长度为8个字符
      // console.log(input.length,"input.length");
      // if (input.length > 8) {
      // 	this.form.name = input.substring(0, 7); // 截断超过8个字符的部分
      // }
    },
    select_sex() {
      this.show = true;
    },
    selected_sex(list) {
      // console.log(list);
      this.form.sex = list.value[0].type;
      this.show = false;
    },
    // 上传头像
    uploadAvatar() {
      console.log(11);
      uni.chooseImage({
        count: 1, //默认9
        success: (res) => {
          uni.uploadFile({
            url: this.vuex_baseUrl + "/files/upload",
            filePath: res.tempFilePaths[0],
            name: "file",
            success: (uploadFileRes) => {
              let imgData = JSON.parse(uploadFileRes.data);
              console.log(imgData,'uploadFileRes');
              if (imgData.code == 200) {
                uni.showToast({
                  mask: true,
                  icon: "none",
                  title: "上传成功",
                });
                this.form.avatar = imgData?.data;
              }
            },
          });
        },
        fail: (res) => {
          console.log(res);
        },
      });
    },
    getInfo() {
      this.$api.userInfo().then((res) => {
        this.form = res.data;
      });
    },
    submit() {
      if (this.form.name == "") {
        uni.showToast({
          mask: true,
          icon: "none",
          title: "姓名不能为空",
        });
      } else if (this.form.name.length > 8) {
        uni.showToast({
          mask: true,
          icon: "none",
          title: "姓名大于8个字符",
        });
      } else {
        this.$api.updateInfo(this.form).then((res) => {
          uni.showToast({
            title: "修改成功",
            icon: "success",
            duration: 1000,
          });
          setTimeout(() => {
            uni.navigateBack();
          }, 1000);
        });
      }
    },
  },
  onLoad() {
    console.log();
    this.getInfo();
  },
};
</script>

<style lang="scss" scoped>
.main {
  padding: 0 30rpx 178rpx;
  padding-top: 200rpx;
  box-sizing: border-box;
}

.head {
  width: 90rpx;
  height: 90rpx;
  border-radius: 45rpx;
  margin-right: 10rpx;
}

.item {
  display: flex;
  justify-content: space-between;
  border-bottom: 2rpx solid #eeeeee;
  height: 140rpx;
  align-items: center;
}

.items {
  height: 110rpx;
}

.item-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.text {
  font-size: 28rpx;
  font-weight: 700;
  color: #333333;
}

.ipt {
  // width: 210rpx;
  font-size: 24rpx;
  color: #999999;
  margin-right: 8rpx;
  text-align: right;
}

.ipt1 {
  width: 300rpx;
}

::v-deep .u-textarea {
  background-color: #f7f7f7 !important;
}

.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 40rpx;
  --iphonex-fix-bottom: env(safe-area-inset-bottom);
  padding-bottom: var(--iphonex-fix-bottom);

  view {
    width: 670rpx;
    height: 96rpx;
    line-height: 96rpx;
    text-align: center;
    color: #fff;
    font-size: 36rpx;
    font-weight: bold;
    background: $c-bgColor;
    border-radius: 16rpx;
  }
}
</style>
